<html>
    <head>
        <title> Carona Marota SM</title>
        <meta http-equiv="content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link href="css/estiloauxiliar.min.css" rel="stylesheet">
        <link href="css/estiloauxiliar-responsv.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/styleindex.css">

        <link rel="icon" type="image/png" href="icon.png" >

        <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script type="text/javascript" src="js/gmaps.js"></script>

        <script type="text/javascript" src="js/jquery-1.9.1.js"></script>



        <script type="text/javascript">
            $(document).ready(function() {
                if ($(window).height() < 700) {
                    $(".navbar-fixed-bottom").css('height', "2px");
                    $(".navbar-fixed-bottom").css('opacity', 0.5);
                } else {

                    $(".navbar-fixed-bottom").css('height', "60px");
                    $(".navbar-fixed-bottom").css('opacity', 1);
                }
                $(window).resize(function() {
                    if ($(window).height() < 700) {
                        $(".navbar-fixed-bottom").css('height', "2px");
                        $(".navbar-fixed-bottom").css('opacity', 0.5);
                    } else {
                        $(".navbar-fixed-bottom").css('height', "60px");
                        $(".navbar-fixed-bottom").css('opacity', 1);
                    }
                });
            });
        </script>

    </head>

    <body>
        <div class="header opacityH">
            <div class="container">
                <h1 class="fontdoida fonteindex" style="font-size: 30px;float: left;"> CARONA PROJECT </h1> <span style="color: #fff; position: absolute; margin-top: 12px; margin-left: 20px;"> </span>
                <a class="btn btn-danger shadow" href="index.html" style="float:right">
                    Home
                </a>
            </div>
        </div>
        <div class="bg_inicio "></div>  
        <div class="container">
            <div id="infos" class="loginmid logleft " style="float:left">
                <div class="alert alert-success">
                    <strong style="font-size: 20px">Carona Marota</strong>, um jeito rápido, prático e fácil de achar ou compartilhar uma carona!  
                </div> 

                <div class="rowinfo">
                    <img   src="images/index/eco-friendly.png" height="65px" style="float:left;  ">
                    <div style="float:right;width: 70%"> <h3 >Um projeto ecologicamente correto.</h3></div>
                </div>

                <div class="rowinfo">
                    <img   src="images/index/maps.png" height="90px" style="float:left; ">
                    <div style="float:right;width: 70%"> <h3 style="margin-top:35px" >Ache caronas rapidamente!</h3></div>

                </div>
                <div class="rowinfo">
                    <img src="images/index/trophy.png" height="100px" style="float:left;">
                    <div style="float:right;width: 70%"> <h3 >Mostre que é um bom companheiro de caronas para todos!</h3></div>
                </div> 
            </div>

            <div id="logar" class="loginmid" style="float:right">
                <h1 > <span class="shadow">Register in Carona Marota </span></h1>

                <form name="input" action="cadastra.php" method="post" style="margin-top: 50px">

                    <input class="input-xlarge" type="text" name='nome' placeholder="Name" required="true" title="Campo Obrigat&oacute;rio!" />
                    <input class="input-xlarge" type="password" name='senha' placeholder="Password" required="true" title="Campo Obrigat&oacute;rio!"/>
                    <input class="input-xlarge" type="text" name='email' placeholder="E-mail" required="true" title="Campo Obrigat&oacute;rio!"/>
                    <select name='sexo'>            
                        <option value="Masculino">Masculino</option>
                        <option value="Feminino">Feminino</option>            
                    </select>
                    <select name='estados'>            
                        <option value="africasul">Africa do Sul</option>
                        <option value="Alemanha">Alemanha</option>
                        <option value="Angola">Angola</option>
                        <option value="Argelia">Argelia</option>
                        <option value="Argentina">Argentina</option>
                        <option value="Australia">Australia</option>                        
                        <option value="Belgica">Belgica</option>
                        <option value="Brasil">Brasil</option>                        
                        <option value="Chile">Chile</option>
                        <option value="China">China</option>
                        <option value="Colombia">Colombia</option>
                        <option value="costa">Costa do Marfim</option>                        
                        <option value="Dinamarca">Dinamarca</option>
                        <option value="Egito">Egito</option>
                        <option value="Espanha">Espanha</option>                                                
                        <option value="EUA">EUA</option>
                        <option value="Franca">Franca</option>
                        <option value="Gana">Gana</option>
                        <option value="Honduras">Honduras</option>                                                                        
                        <option value="Ira">Ira</option>                        
                        <option value="Irlanda">Irlanda</option>                        
                        <option value="Israel">Israel</option>                                                
                        <option value="Paraguai">Paraguai</option>
                        <option value="Peru">Peru</option>                                                
                        <option value="Portugal">Portugal</option>                        
                        <option value="Senegal">Senegal</option>
                        <option value="Siria">Siria</option>
                        <option value="Uruguai">Uruguai</option>                        
                    </select>
                    <br/><br/>
                    <button type="submit" class="btn btn-success">Cadastrar!</button>
                </form> <br>    

            </div>


        </div>
        <footer class="navbar-fixed-bottom">


        </footer>


    </body>
</html>